<template>
    <view class="charts-box">
      <qiun-data-charts 
        type="arcbar"
        :opts="opts"
        :chartData="chartData"
      />
    </view>
  </template>
  
  <script>
  export default {
    data() {
      return {
        chartData: {},
        //您可以通过修改 config-ucharts.js 文件中下标为 ['arcbar'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
        opts: {
          color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
          padding: undefined,
          title: {
            name: "",
            fontSize: 16,
            color: "#5889f1"
          },
          subtitle: {
            name: "",
            fontSize: 16,
            color: "#5889f1"
          },
          extra: {
            arcbar: {
              type: "circle",
              width: 6,
              backgroundColor: "#f7fafe",
              startAngle: 1.5,
              endAngle: 0.25,
              gap: 2
            }
          }
        }
      };
    },
    methods: {
        init(data){
        this.opts =  Object.assign(this.opts, data)
      },
      setData(data) {
        //模拟从服务器获取数据时的延时
        this.chartData = data
      },
    }
  };
  </script>
  
  <style scoped>
    /* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
    .charts-box {
      width: 100%;
      height: 100%;
    }
  </style>